<template>
  <div>echarts图表</div>
  <div id="box" ref="box"></div>
  <div id="box2" ref="box2"></div>
</template>

<script>
import * as echarts from "echarts";

let myChart;
let myChart2;

export default {
  mounted() {
    this.init1();
    this.init2();

    // 原生js里面的监听屏幕尺寸变化的方法
    window.addEventListener("resize", this.resize);
  },
  beforeUnmount() {
    // 在组件卸载的时候，需要去卸载echarts的实例
    myChart.dispose();
    myChart2.dispose();
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    resize() {
      // 用于在容器大小发生改变时，改变图表尺寸
      myChart.resize();
      myChart2.resize();
    },
    init1() {
      // 只能放在mounted里面
      // 基于准备好的dom，初始化echarts实例
      myChart = echarts.init(this.$refs.box);
      // 绘制图表
      myChart.setOption({
        // color: ['#f00', '#ff0', '#ccc', '#1869A0', '#FF9393'],
        // tooltip: {
        //   trigger: 'item'
        // },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["50%", "70%"],
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 100,
              borderColor: "#fff",
              // borderWidth: 2
            },
            label: {
              show: false,
              // position: 'inside',
              fontSize: 0,
              color: "#fff",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
            ],
          },
        ],
      });
    },
    init2() {
      // 如果需要去请求数据，先请求完数据以后，再去添加echarts实例
      fetch(
        "https://www.fastmock.site/mock/09675ed913f92e849dced83a8c3b33a3/api/echarts/data"
      )
        .then((response) => response.json())
        .then((res) => {
          // console.log(res);
          // 只能放在mounted里面
          // 基于准备好的dom，初始化echarts实例
          myChart2 = echarts.init(this.$refs.box2);

          // 绘制图表
          myChart2.setOption({
            title: {
              text: "医院高峰地区",
            },
            legend: {
              left: "5%",
              top: "30",
              data: res.data.map((item) => item.yiyuan),
            },
            gird: {
              top: "20%",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            xAxis: {
              type: "category",
              data: res.data[0].list.map((item) => item.bumen),
            },
            yAxis: {
              type: "value",
            },
            series: res.data.map((item) => {
              return {
                name: item.yiyuan,
                data: item.list.map((item) => item.count),
                type: "line",
              };
            }),
            // series: [
            //   {
            //     name: "浙一医院",
            //     data: [150, 230, 224, 218, 135, 147],
            //     type: "line",
            //   },
            //   {
            //     name: "九合医院",
            //     data: [50, 280, 310, 123, 234, 156],
            //     type: "line",
            //   },
            // ],
          });
        });
    },
  },
};
</script>

<style>
#box,
#box2 {
  height: 400px;
  border: 1px solid #000;
}
</style>
